<style scoped lang="scss">
header {
  height: 120px;
  overflow: hidden;

  .logo {
    padding-top: 20px;
    float: left;

    img {
      height: 80px;
    }
  }

  ul {
    padding-top: 35px;

    li {
      float: left;
    }

    a {
      color: #333;
      height: 50px;
      line-height: 50px;
      width: 80px;
      text-align: center;
      text-decoration: none;
      display: block;
    }

    .nuxt-link-exact-active {
      border-bottom: 3px #dd1c1c solid;
    }

    float: right;
  }
}
</style>
<template>
  <header class="width1080 margin0auto">
    <div class="logo">
      <nuxt-link to="/">
        <img :src="logo.value" alt="" />
      </nuxt-link>
    </div>
    <ul style="overflow: hidden">
      <li v-for="(item, idx) in nav" :key="idx">
        <nuxt-link class="fs16" :to="item.url" tag="a">
          {{ item.name }}
        </nuxt-link>
      </li>
    </ul>
  </header>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "DefaultHeader",
  data() {
    return {
      logo: {}
    };
  },
  computed: {
    ...mapState(["nav"])
  },
  mounted() {
    this.getLogo();
  },
  methods: {
    async getLogo() {
      this.logo = await this.$configService.detail({ key: "WEB_LOGO" });
    }
  }
};
</script>
